<template>
  <view>
      <!-- 引入自定义搜索组件 -->
      <my-search @click='gotoSearch'></my-search>
      <view class="scroll-view-container">
        <!-- 左侧视图滚动区域 -->
        <scroll-view scroll-y="true"  class="left-scroll-view" :style="{height:wh +'px'}">
          <!-- block代码可以看见这个标签  渲染到页面看不见这个标签 -->
          <block v-for="(item,i) in cateList" :key="i">
              <view :class="['left-scroll-view-item', active===i? 'active': '']" @click="activeChanged(i)">{{item.cat_name}}</view>
          </block>
          
        </scroll-view>
        <!-- /左侧视图滚动区域 -->
        <!-- 右侧视图滚动区域 -->
        <scroll-view scroll-y="true" :style="{height:wh +'px'}" :scroll-top="scrollTop">
                <view class="right-scroll-view">
                  <!-- 右侧二级视图区域 -->
                    <view class="cate-lv2" v-for="(item2,i2) in cateLevel2" :key='i2'>
                            <!-- 右侧二级视图标题区域 -->
                            <view class="cate-lv2-title">/{{item2.cat_name}}/</view>
                             <!-- /右侧二级视图标题区域 -->
                             
                            <!-- 右侧三级视图 -->
                            <view class="cate-lv3-list">
                              <!-- 三级分类item项 -->
                                   <view class="cate-lv3-item" 
                                   v-for="(item3,i3) in item2.children" 
                                   :key="i3" 
                                   @click="gotoGoodsList(item3)">
                                       <image :src="item3.cat_icon"></image>
                                       <text>{{item3.cat_name}}</text>
                                   </view>
                               <!-- /三级分类item项 -->
                            </view>
                             <!-- /右侧三级视图 -->
                      </view>
                   <!-- /右侧二级视图区域 -->
                   
                   
                </view>
        </scroll-view>
        <!-- 右侧视图滚动区域 -->
      </view>
  </view>
</template>

<script>
  // 导入自己封装的 mixin 模块
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
      // 将 badgeMix 混入到当前的页面中进行使用
      mixins: [badgeMix],
    data() {
      return {
        //屏幕可用高度
        wh:0,
        // 分类数据列表
        cateList: [],
        //显示被选中的分类列表标记
        active:0,
        // 二级分类列表
        cateLevel2: [],
        // 滚动条距离顶部的距离
        scrollTop:0
      };
    },
    onLoad() {
      // 获取设备信息的api方法
     const sysInfo = uni.getSystemInfoSync()
     // console.log(sysInfo )
     //将设备可用高度赋值给wh
     //-50是减去搜索框的高度
     this.wh=sysInfo.windowHeight-50
     //调用获取分类列表的方法
     this.getCateList()
    },
    methods:{
      //获取分类列表数据的方法
      async getCateList(){
           const {data:res} = await uni.$http.get('/api/public/v1/categories')
           // console.log(res)
           this.cateList=res.message
           //为二级分类列表赋值  一开始默认赋值索引为0的那一项
           this.cateLevel2=res.message[0].children
      },
      //点击切换左侧一级分类列表的方法
      activeChanged(i) {
        this.active=i
        //当点击一级分类发生改变重新为cateLevel2赋值
        this.cateLevel2=this.cateList[i].children
        //点击切换左侧视图将滚动条调到顶部 将scrollTop设置为1和0互相切换或者--为负数都可以
         // this.scrollTop===0? this.scrollTop=1:this.scrollTop=0
         this.scrollTop--
      },
      //点击右侧三级分类  跳转到商品列表页面的方法
       gotoGoodsList(item3) {
          uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?cid='+item3.cat_id
          })
      },
      //点击搜索框前往搜索组件
      gotoSearch(){
        //点击搜索框进入搜索页面
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
        // console.log('ok')
      }
    }
  }
</script>

<style lang="scss">
  .scroll-view-container {
    display: flex;
  }
  .left-scroll-view {
    width: 120px;
  }
  .left-scroll-view-item {
    line-height: 60px;
    background-color:#f7f7f7;
    text-align: center;
    font-size: 12px;
    // &符号是既包含left-scroll-view-item类名也包含active类名
    &.active {
      background-color: #FFFFFF;
      position: relative;
      &::before {
        content: '';
        display: block;
        width: 3px;
        height: 30px;
        background-color: #c00000;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }
  .cate-lv2-title {
     font-size: 12px;
      font-weight: bold;
      text-align: center;
      padding: 15px 0;
  }
  .cate-lv3-list {
      display: flex;
      flex-wrap: wrap;

      .cate-lv3-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 33.33%;
          margin-bottom:10px ;
          image {
            width: 60px;
            height: 60px;
          }
          text {
            font-size: 12px;
          }
      }
  }
  
</style>
